<template>
    <div class="filter">
        <div class="filter-item">
            <label for="">任务项：</label>
            <el-input
                v-model="searchForm.title"
                placeholder="请输入任务项"
                style="width: 145px;"
            />
        </div>
        <div class="filter-item">
            <label for="">数据类型：</label>
            <el-select
                v-model="searchForm.taskCategory"
                class="m-2"
                placeholder="请选择数据类型"
                style="width: 145px;"
            >
                <el-option
                    v-for="item in taskCategoryList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <el-button
                size="default"
                type="primary"
                @click="search"
            >查询</el-button>
            <el-button
                size="default"
                @click="reset"
            >重置</el-button>
        </div>
    </div>

    <div class="filter">
        <div class="filter-item">
            <el-button
                type="primary"
                @click="handleClick('add')"
            >新增</el-button>
        </div>
    </div>

    <el-table
        :data="tableData"
        style="width: 100%"
        id="inspectionTask"
    >
        <el-table-column
            type="index"
            label="序号"
            width="55"
        />
        <el-table-column
            prop="title"
            label="任务项"
        />
        <el-table-column
            prop="taskCategory"
            label="数据类型"
        >
            <template #default="scope">
                {{ conversionType(scope.row.taskCategory) }}
            </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="160"
        >
            <template #default="scope">
                <el-button
                    type="primary"
                    size="small"
                    :icon="View"
                    @click="handleClick('detail', scope.row)"
                >
                </el-button>
                <el-button
                    type="primary"
                    size="small"
                    :icon="Edit"
                    @click="handleClick('edit', scope.row)"
                >
                </el-button>
                <el-button
                    type="danger"
                    size="small"
                    :icon="Delete"
                    @click="handleDelete(scope.row)"
                ></el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 新增/编辑 -->

    <el-dialog
        v-model="taskVisible"
        :title="taskTitle"
        width="1032"
    >
        <el-scrollbar height="460px">
            <div class="dialogContent">
                <el-form
                    ref="taskFormRef"
                    :model="taskForm"
                    label-width="100px"
                    class="demo-ruleForm"
                    :inline="true"
                    :disabled="taskType == 'detail'"
                >
                    <div class="dialogModel">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item
                                    label="任务项"
                                    prop="title"
                                    style="width: 100%;"
                                >
                                    <el-input
                                        v-model="taskForm.title"
                                        placeholder="请输入"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item
                                    label="数据类型"
                                    prop="taskCategory"
                                    style="width: 100%;"
                                >
                                    <el-select
                                        v-model="taskForm.taskCategory"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in taskCategoryList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item
                                    label="排序"
                                    prop="taskCategory"
                                    style="width: 100%;"
                                >
                                    <el-input-number
                                        v-model="taskForm.taskSort"
                                        :min="1"
                                        :max="99"
                                        @change="handleChange"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="dialogModel">
                        <div class="modelTitle">
                            <div>步骤</div>
                            <div
                                class="operateIcon"
                                v-show="taskType != 'detail'"
                            >
                                <img
                                    src="../../../../assets/images/plus.png"
                                    alt=""
                                    @click="addSteps"
                                >
                                <img
                                    v-if="taskForm.childrenTasks && taskForm.childrenTasks.length > 1"
                                    src="../../../../assets/images/minus.png"
                                    alt=""
                                    @click="deleteSteps"
                                >
                            </div>
                        </div>

                        <el-tabs
                            v-model="childrenTasksActiveName"
                            class="demo-tabs"
                        >
                            <el-tab-pane
                                v-for="(item, index) in taskForm.childrenTasks"
                                :key="index"
                                :label="`步骤${index + 1}`"
                                :name="index"
                            >
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item
                                            label="操作步骤"
                                            prop="title"
                                            style="width: 100%;"
                                        >
                                            <el-input
                                                v-model="item.title"
                                                placeholder="请输入"
                                            />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item
                                            label="是否必须"
                                            prop="isNess"
                                            style="width: 100%;"
                                        >
                                            <el-select
                                                v-model="item.isNess"
                                                placeholder="请选择"
                                            >
                                                <el-option
                                                    v-for="item in isNessList"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">

                                        <el-table
                                            :data="item.childrenTasks"
                                            style="width: 100%"
                                            border
                                        >
                                            <el-table-column
                                                prop="title"
                                                label="步骤分解"
                                                width="200"
                                            >
                                                <template #default="scope">
                                                    <el-input
                                                        v-model="scope.row.title"
                                                        autosize
                                                        style="width: 100%"
                                                        type="textarea"
                                                    />
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="description"
                                                label="具体内容"
                                            >
                                                <template #default="scope">
                                                    <el-input
                                                        v-model="scope.row.description"
                                                        autosize
                                                        style="width: 100%"
                                                        type="textarea"
                                                    /></template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="considerations"
                                                label="注意事项"
                                                width="200"
                                            >
                                                <template #default="scope">
                                                    <el-input
                                                        v-model="scope.row.considerations"
                                                        autosize
                                                        style="width: 100%"
                                                        type="textarea"
                                                    /></template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="considerations"
                                                label="图片"
                                                width="60"
                                            >
                                                <template #default="scope">
                                                    <el-upload
                                                        ref="upload"
                                                        v-model:file-list="scope.row.considerationsFileIdList"
                                                        action="#"
                                                        style="height: 20px"
                                                        :http-request="(res) => {
                                                            return uploadFileList(res, scope.row);
                                                        }"
                                                    >

                                                        <el-popover
                                                            class="box-item"
                                                            placement="top"
                                                            width="700"
                                                        >
                                                            <template #reference>
                                                                <el-icon
                                                                    class="el-icon--left"
                                                                    size="20"
                                                                    :color="scope.row.considerationsFileId ? '#58be3f' : '#ccc'"
                                                                >
                                                                    <Picture />
                                                                </el-icon>
                                                            </template>
                                                            <div style="width: 660px;text-align: center;position: relative;">
                                                                <el-icon
                                                                    class="el-icon--left"
                                                                    size="20"
                                                                    style="position: absolute;right: -10px;z-index: 1000;cursor: pointer;"
                                                                    color="red"
                                                                    @click="clearPic(scope.row)"
                                                                    v-show="scope.row.considerationsFileId"
                                                                >
                                                                    <CircleClose />
                                                                </el-icon>
                                                                <el-image
                                                                    v-if="scope.row.considerationsFileIdList.length > 0"
                                                                    :src="scope.row.considerationsFileIdList.length > 0 ? scope.row.considerationsFileIdList[0].url : ''"
                                                                    alt=""
                                                                />
                                                                <span v-else>暂无照片</span>
                                                            </div>
                                                        </el-popover>
                                                    </el-upload>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                label="操作"
                                                width="80"
                                            >
                                                <template #default="scope">
                                                    <div
                                                        class="operateIcon"
                                                        v-show="taskType != 'detail'"
                                                    >
                                                        <img
                                                            src="../../../../assets/images/plus.png"
                                                            alt=""
                                                            @click="addStepsDecomposition(scope.row, scope.$index)"
                                                            style=" width: 20px;height: 20px;margin-right: 4px;"
                                                        >
                                                        <img
                                                            v-if="item.childrenTasks.length > 1"
                                                            src="../../../../assets/images/minus.png"
                                                            alt=""
                                                            @click="deleteStepsDecomposition(scope.row, scope.$index)"
                                                            style=" width: 20px;height: 20px;margin-right: 4px;"
                                                        >
                                                    </div>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div class="dialogModel">
                        <div class="modelTitle">
                            <div>计算公式</div>
                            <div
                                class="operateIcon"
                                v-show="taskType != 'detail' && taskForm.isCalcu == 0"
                            >
                                <img
                                    src="../../../../assets/images/plus.png"
                                    alt=""
                                    @click="addCalculationFormula"
                                >
                                <img
                                    v-if="taskForm.formulaMainList.length > 1"
                                    src="../../../../assets/images/minus.png"
                                    alt=""
                                    @click="deleteCalculationFormula"
                                >
                            </div>
                            <div>
                                <el-checkbox
                                    style="height: 18px;line-height: 18px;margin-left:10px;"
                                    :true-value="1"
                                    :false-value="0"
                                    v-model="taskForm.isCalcu"
                                >无需计算</el-checkbox>
                            </div>
                        </div>
                        <el-tabs
                            v-model="formulaMainListActiveName"
                            class="demo-tabs"
                            v-show="taskForm.isCalcu == 0"
                        >
                            <el-tab-pane
                                v-for="(item, index) in taskForm.formulaMainList"
                                :key="index"
                                :label="`公式${index + 1}`"
                                :name="index"
                            >
                                <template #label>
                                    <span
                                        class="custom-tabs-label"
                                        style="display: flex;flex-direction: row;align-items: center;"
                                    >
                                        <span style="margin-right: 10px">{{ `公式${index + 1}` }}</span>
                                        <!-- <div
                                            v-show="formulaMainListActiveName == index"
                                            class="el-col-content el-col-content-mr"
                                            @click="saveFormula(index)"
                                        >
                                            <img
                                                src="../../../../assets/images/save.png"
                                                alt=""
                                                style=" width: 16px;height: 16px;margin-right: 4px;"
                                            >
                                            <span style="font-size: 12px;">保存</span>
                                        </div> -->
                                    </span>
                                </template>
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item
                                            label="公式名称"
                                            prop="formulaName"
                                            style="width: 100%;"
                                        >
                                            <el-input
                                                v-model="item.formulaName"
                                                placeholder="请输入"
                                            />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="16">
                                        <el-form-item
                                            label="说明"
                                            prop="description"
                                            style="width: 100%;"
                                        >
                                            <el-input
                                                v-model="item.description"
                                                placeholder="请输入"
                                            />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row
                                    v-for="(m, n) in item.processValuePos"
                                    :key="n"
                                >
                                    <el-col :span="7">
                                        <el-form-item
                                            :label="n == 0 ? '过程值' : ' '"
                                            prop="description"
                                            style="width: 100%;"
                                        >
                                            <el-input
                                                v-model="m.valueName"
                                                placeholder="参数名"
                                                :disabled="curveValue(m.valueName)"
                                            />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <div class="el-col-content">
                                            <el-input
                                                style="margin: 0 10px;"
                                                v-model="m.meaning"
                                                placeholder="参数含义"
                                                :disabled="curveValue(m.valueName)"
                                            />
                                        </div>
                                    </el-col>
                                    <el-col :span="7">
                                        <div class="el-col-content">
                                            <el-input
                                                v-model="m.unit"
                                                placeholder="单位"
                                            />
                                            <el-checkbox
                                                class="el-col-content-input"
                                                style="height: 18px;line-height: 18px;margin-left:10px;"
                                                v-model="m.isCalculate"
                                                :true-value="1"
                                                :false-value="0"
                                            >参与计算</el-checkbox>
                                            <el-checkbox
                                                class="el-col-content-input"
                                                style="height: 18px;line-height: 18px;margin-left:10px;"
                                                v-model="m.isBackup"
                                                :true-value="1"
                                                :false-value="0"
                                            >备用</el-checkbox>
                                            <el-input
                                                class="el-col-content-input"
                                                v-model="m.backupDays"
                                                placeholder="天数"
                                            />
                                        </div>
                                    </el-col>
                                    <el-col :span="2">
                                        <div
                                            class="operateIcon"
                                            style="width: 80px;"
                                            v-show="taskType != 'detail'"
                                        >
                                            <img
                                                src="../../../../assets/images/plus.png"
                                                alt=""
                                                @click="addProcessValue(m,n)"
                                                style=" width: 20px;height: 20px;margin-right: 4px;margin-top: 5px"
                                            >
                                            <img
                                                v-if="item.processValuePos.length > 1"
                                                src="../../../../assets/images/minus.png"
                                                alt=""
                                                @click="deleteProcessValue(m,n)"
                                                style=" width: 20px;height: 20px;margin-right: 4px;margin-top: 5px"
                                            >
                                        </div>
                                    </el-col>
                                </el-row>

                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item
                                            label="结果公式"
                                            prop="expression"
                                            style="width: 100%;"
                                        >
                                            <el-input
                                                class="el-col-content-input"
                                                v-model="item.expression"
                                                disabled
                                            />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row v-show="taskType != 'detail'">
                                    <el-col :span="24">
                                        <el-form-item
                                            label=" "
                                            prop="description"
                                            style="width: 100%;"
                                        >
                                            <div
                                                class="el-col-content el-col-content-mr"
                                                @click="addFormulaProcessValue(index)"
                                            >
                                                <img
                                                    src="../../../../assets/images/plus.png"
                                                    alt=""
                                                    style=" width: 20px;height: 20px;margin-right: 4px;"
                                                >
                                                <span>过程值</span>
                                            </div>
                                            <div
                                                class="el-col-content el-col-content-mr"
                                                @click="addFormulaNumber(index)"
                                            >
                                                <img
                                                    src="../../../../assets/images/plus.png"
                                                    alt=""
                                                    style=" width: 20px;height: 20px;margin-right: 4px;"
                                                >
                                                <span>数字</span>
                                            </div>
                                            <div
                                                class="el-col-content el-col-content-mr"
                                                @click="addFormulaOperator(index)"
                                            >
                                                <img
                                                    src="../../../../assets/images/plus.png"
                                                    alt=""
                                                    style=" width: 20px;height: 20px;margin-right: 4px;"
                                                >
                                                <span>运算符号</span>
                                            </div>
                                            <div
                                                class="el-col-content el-col-content-mr"
                                                @click="clearFormula(index)"
                                            >
                                                <img
                                                    src="../../../../assets/images/minus.png"
                                                    alt=""
                                                    style=" width: 20px;height: 20px;margin-right: 4px;"
                                                >
                                                <span>清空</span>
                                            </div>
                                            <div
                                                class="el-col-content el-col-content-mr"
                                                @click="saveFormula(index)"
                                            >
                                                <img
                                                    src="../../../../assets/images/save.png"
                                                    alt=""
                                                    style=" width: 20px;height: 20px;margin-right: 4px;"
                                                >
                                                <span>保存</span>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <div
                                    class="calculationFormula"
                                    v-show="taskType != 'detail'"
                                >
                                    <div style="width: 100px;"></div>
                                    <div class="calculationFormulaContent">
                                        <div
                                            style="padding: 3px 6px 3px 0px"
                                            v-for="(p, q) in item.calculationFormulaContent"
                                            :key="q"
                                            class="calculationFormulaContentItem"
                                        >
                                            <div
                                                class="delelteItem"
                                                @click="delelteCalculationFormulaItem(index,q)"
                                            >

                                                <el-icon
                                                    class="elIcon"
                                                    :size="12"
                                                    color="#fff"
                                                >
                                                    <Delete />
                                                </el-icon>
                                            </div>
                                            <el-select
                                                v-if="p.type == '1'"
                                                v-model="p.value"
                                                class="m-2"
                                                style="width: 100px"
                                                placeholder="过程值"
                                            >
                                                <el-option
                                                    v-for="j in processValuePosList[index]"
                                                    :key="j"
                                                    :label="j"
                                                    :value="j"
                                                />
                                            </el-select>

                                            <el-input-number
                                                controls-position="right"
                                                v-if="p.type == '2'"
                                                v-model="p.value"
                                                style="width: 100px"
                                                placeholder="数值"
                                            />
                                            <el-select
                                                v-if="p.type == '3'"
                                                v-model="p.value"
                                                class="m-2"
                                                style="width: 100px"
                                                placeholder="运算符号"
                                            >
                                                <el-option
                                                    v-for="j in operatorList"
                                                    :key="j"
                                                    :label="j"
                                                    :value="j"
                                                />
                                            </el-select>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="calculationFormula">
                                    <div style="width: 110px;"></div>
                                    <div class="calculationFormulaContent">
                                        <div style="line-height:32px;">{{ formulaStyleList[index] }}</div>
                                    </div>
                                </div> -->
                                <div style="border-top: 1px dashed #58be3f;margin: 0 0 15px 14px;opacity: 0.5;"></div>
                                <el-row v-show="item.medianPos.length == 0">
                                    <el-col :span="24">
                                        <el-form-item
                                            label=" "
                                            prop="description"
                                            style="width: 100%;"
                                        >
                                            <div
                                                class="el-col-content el-col-content-mr"
                                                @click="addMedianPosValue(index, 'median', n)"
                                            >
                                                <img
                                                    src="../../../../assets/images/plus.png"
                                                    alt=""
                                                    style=" width: 20px;height: 20px;margin-right: 4px;"
                                                >
                                                <span>中间值</span>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <div
                                    v-for="(m, n) in item.medianPos"
                                    :key="n"
                                >
                                    <el-row>
                                        <el-col :span="7">
                                            <el-form-item
                                                label="中间值"
                                                prop="description"
                                                style="width: 100%;"
                                            >
                                                <el-input
                                                    v-model="m.medianName"
                                                    placeholder="参数名"
                                                />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <div class="el-col-content">
                                                <el-input
                                                    style="margin: 0 10px;"
                                                    v-model="m.medianMeaning"
                                                    placeholder="参数含义"
                                                />
                                            </div>
                                        </el-col>
                                        <el-col :span="5">
                                            <div class="el-col-content">
                                                <el-input
                                                    class="el-col-content-input"
                                                    v-model="m.digit"
                                                    placeholder="位数"
                                                    style="width: 120px;margin-right: 2px;"
                                                />
                                                <p style="width: 120px;">位小数</p>
                                                <el-input
                                                    v-model="m.unit"
                                                    placeholder="计量单位"
                                                    style="width: 200px"
                                                />
                                            </div>
                                        </el-col>
                                        <el-col :span="1"></el-col>
                                        <el-col :span="2">
                                            <div
                                                class="operateIcon"
                                                style="width: 80px;"
                                                v-show="taskType != 'detail'"
                                            >
                                                <img
                                                    src="../../../../assets/images/plus.png"
                                                    alt=""
                                                    @click="addMedianPosValue(m,n)"
                                                    style=" width: 20px;height: 20px;margin-right: 4px;margin-top: 5px"
                                                >
                                                <img
                                                    v-if="item.processValuePos.length > 1"
                                                    src="../../../../assets/images/minus.png"
                                                    alt=""
                                                    @click="deleteMedianPosValue(m,n)"
                                                    style=" width: 20px;height: 20px;margin-right: 4px;margin-top: 5px"
                                                >
                                            </div>
                                        </el-col>
                                    </el-row>

                                    <el-row>
                                        <el-col :span="24">
                                            <el-form-item
                                                label="中间值公式"
                                                prop="medianExpression"
                                                style="width: 100%;"
                                            >
                                                <el-input
                                                    class="el-col-content-input"
                                                    v-model="m.medianExpression"
                                                    disabled
                                                />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row v-show="taskType != 'detail'">
                                        <el-col :span="24">
                                            <el-form-item
                                                label=" "
                                                prop="description"
                                                style="width: 100%;"
                                            >
                                                <div
                                                    class="el-col-content el-col-content-mr"
                                                    @click="addFormulaProcessValue(index, 'median', n)"
                                                >
                                                    <img
                                                        src="../../../../assets/images/plus.png"
                                                        alt=""
                                                        style=" width: 20px;height: 20px;margin-right: 4px;"
                                                    >
                                                    <span>过程值</span>
                                                </div>
                                                <div
                                                    class="el-col-content el-col-content-mr"
                                                    @click="addFormulaNumber(index, 'median', n)"
                                                >
                                                    <img
                                                        src="../../../../assets/images/plus.png"
                                                        alt=""
                                                        style=" width: 20px;height: 20px;margin-right: 4px;"
                                                    >
                                                    <span>数字</span>
                                                </div>
                                                <div
                                                    class="el-col-content el-col-content-mr"
                                                    @click="addFormulaOperator(index, 'median', n)"
                                                >
                                                    <img
                                                        src="../../../../assets/images/plus.png"
                                                        alt=""
                                                        style=" width: 20px;height: 20px;margin-right: 4px;"
                                                    >
                                                    <span>运算符号</span>
                                                </div>
                                                <div
                                                    class="el-col-content el-col-content-mr"
                                                    @click="clearFormula(index, 'median', n)"
                                                >
                                                    <img
                                                        src="../../../../assets/images/minus.png"
                                                        alt=""
                                                        style=" width: 20px;height: 20px;margin-right: 4px;"
                                                    >
                                                    <span>清空中间值</span>
                                                </div>
                                                <!-- <div
                                                    class="el-col-content el-col-content-mr"
                                                    @click="saveFormula(index)"
                                                >
                                                    <img
                                                        src="../../../../assets/images/save.png"
                                                        alt=""
                                                        style=" width: 20px;height: 20px;margin-right: 4px;"
                                                    >
                                                    <span>保存</span>
                                                </div> -->
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <div
                                        class="calculationFormula"
                                        v-show="taskType != 'detail'"
                                    >
                                        <div style="width: 100px;"></div>
                                        <div class="calculationFormulaContent">
                                            <div
                                                style="padding: 3px 6px 3px 0px"
                                                v-for="(p, q) in m.medianCalculationFormulaContent"
                                                :key="q"
                                                class="calculationFormulaContentItem"
                                            >
                                                <div
                                                    class="delelteItem"
                                                    @click="delelteCalculationFormulaItem(index, q, 'median', n)"
                                                >

                                                    <el-icon
                                                        class="elIcon"
                                                        :size="12"
                                                        color="#fff"
                                                    >
                                                        <Delete />
                                                    </el-icon>
                                                </div>
                                                <el-select
                                                    v-if="p.type == '1'"
                                                    v-model="p.value"
                                                    class="m-2"
                                                    style="width: 100px"
                                                    placeholder="过程值"
                                                >
                                                    <el-option
                                                        v-for="j in processValuePosList[index]"
                                                        :key="j"
                                                        :label="j"
                                                        :value="j"
                                                    />
                                                </el-select>

                                                <el-input-number
                                                    controls-position="right"
                                                    v-if="p.type == '2'"
                                                    v-model="p.value"
                                                    style="width: 100px"
                                                    placeholder="数值"
                                                />
                                                <el-select
                                                    v-if="p.type == '3'"
                                                    v-model="p.value"
                                                    class="m-2"
                                                    style="width: 100px"
                                                    placeholder="运算符号"
                                                >
                                                    <el-option
                                                        v-for="j in operatorList"
                                                        :key="j"
                                                        :label="j"
                                                        :value="j"
                                                    />
                                                </el-select>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="border-bottom: 1px dashed #58be3f;margin: 0 0 15px 48px;opacity: 0.5;"></div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>

                    <div class="dialogModel">
                        <div class="modelTitle">
                            <div>数据规范</div>
                        </div>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item
                                    label="小数位"
                                    prop="decimalPlace"
                                    style="width: 100%;"
                                >
                                    <el-input
                                        v-model="taskForm.decimalPlace"
                                        placeholder="请输入"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item
                                    label="检出限值"
                                    prop="detectionLimit"
                                    style="width: 100%;"
                                >
                                    <el-input
                                        v-model="taskForm.detectionLimit"
                                        placeholder="请输入"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item
                                    label="单位"
                                    prop="unit"
                                    style="width: 100%;"
                                >
                                    <el-input
                                        v-model="taskForm.unit"
                                        placeholder="请输入"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item
                                    label="结果类型"
                                    prop="resultType"
                                    style="width: 100%;"
                                >
                                    <el-select
                                        v-model="taskForm.resultType"
                                        class="m-2"
                                        placeholder="结果类型"
                                    >
                                        <el-option
                                            v-for="j in resultTypeList"
                                            :key="j"
                                            :label="j"
                                            :value="j"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="dialogModel">
                        <div class="modelTitle">
                            <div>仪器方法</div>
                        </div>

                        <el-row>
                            <el-col :span="12">
                                <el-row
                                    v-for="(m, n) in taskForm.instruments"
                                    :key="n"
                                >
                                    <el-col :span="21">
                                        <el-form-item
                                            :label="n == 0 ? '仪器' : ' '"
                                            prop="description"
                                            style="width: 100%;"
                                        >
                                            <el-input
                                                v-model="m.valueName"
                                                placeholder="仪器"
                                                :disabled="curveValue(m.valueName)"
                                            />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="3">
                                        <div
                                            class="operateIcon"
                                            style="width: 80px;"
                                            v-show="taskType != 'detail'"
                                        >
                                            <img
                                                src="../../../../assets/images/plus.png"
                                                alt=""
                                                @click="addInstruments(m,n)"
                                                style=" width: 20px;height: 20px;margin-right: 4px;margin-top: 5px"
                                            >
                                            <img
                                                v-if="taskForm.instruments.length > 1"
                                                src="../../../../assets/images/minus.png"
                                                alt=""
                                                @click="deleteInstruments(m,n)"
                                                style=" width: 20px;height: 20px;margin-right: 4px;margin-top: 5px"
                                            >
                                        </div>
                                    </el-col>
                                </el-row>

                            </el-col>
                            <el-col :span="12">
                                <el-row
                                    v-for="(m, n) in taskForm.methodNames"
                                    :key="n"
                                >
                                    <el-col :span="21">
                                        <el-form-item
                                            :label="n == 0 ? '方法' : ' '"
                                            prop="valueName"
                                            style="width: 100%;"
                                        >
                                            <el-input
                                                v-model="m.valueName"
                                                placeholder="方法"
                                                :disabled="curveValue(m.valueName)"
                                            />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="3">
                                        <div
                                            class="operateIcon"
                                            style="width: 80px;"
                                            v-show="taskType != 'detail'"
                                        >
                                            <img
                                                src="../../../../assets/images/plus.png"
                                                alt=""
                                                @click="addMethodNames(m,n)"
                                                style=" width: 20px;height: 20px;margin-right: 4px;margin-top: 5px"
                                            >
                                            <img
                                                v-if="taskForm.methodNames.length > 1"
                                                src="../../../../assets/images/minus.png"
                                                alt=""
                                                @click="deleteMethodNames(m,n)"
                                                style=" width: 20px;height: 20px;margin-right: 4px;margin-top: 5px"
                                            >
                                        </div>
                                    </el-col>
                                </el-row>

                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="taskVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    v-if="taskType != 'detail'"
                    @click="taskConfirm(taskType)"
                    v-loading="confirmLoading"
                >
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import taskHttp from "@/https/task.js";
import {
    Delete,
    Edit,
    Picture,
    CircleClose,
    View
} from "@element-plus/icons-vue";
import fileInfoHttp from "@/https/fileInfo.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, ref, watch, nextTick } from "vue";

let searchForm = ref({
    title: "",
    taskCategory: "",
    pageNo: 1,
    pageSize: 10,
});
const taskCategoryList = ref([
    { label: "操作规范", value: 1 },
    { label: "水质数据", value: 2 },
    { label: "工艺数据", value: 3 },
])
const isNessList = ref([
    { label: "是", value: 1 },
    { label: "否", value: 0 },
])
const decimalList = ref([
    { label: "小数", value: 1 },
    { label: "有效数字", value: 0 },
])
const operatorList = ref(['+', '-', '*', '/', '(', ')', '^'])
const resultTypeList = ref(['数值', '非数值'])
let tableData = ref([
]);
// 重置
const reset = async () => {
    searchForm.value.title = ''
    searchForm.value.taskCategory = 1
    search()
}
// 查询
const search = async () => {
    const res = await taskHttp.queryTaskList(searchForm.value)
    console.log(res.data.data, 'res')
    const newDataList = res.data.data.filter((item) => {
        return item.isDeleted == 0
    })
    tableData.value = newDataList
}
// 数据类型转换
const conversionType = (type) => {
    let typeName = ''
    taskCategoryList.value.forEach(item => {
        if (item.value == type) {
            typeName = item.label
        }
    })
    return typeName
}
const taskFormRef = ref()
const taskVisible = ref(false)
const taskTitle = ref('')
const taskType = ref('')
// 特殊任务（曲线绘制）
const curveValue = (name) => {
    let curveValueDisabled = false
    if (name == 'a' || name == 'b') {
        if (taskForm.value.id == 3280 || taskForm.value.id == 3283 || taskForm.value.id == 3286) {
            curveValueDisabled = true
        }
    }
    return curveValueDisabled
}

const getFileInfoById = async (id, type) => {
    let idObj = {}
    const { data } = await fileInfoHttp.fileInfoGetById(id)
    idObj = data.data
    return idObj
}
const currentRow = ref()
// 新增/编辑
const handleClick = async (type, row) => {
    taskType.value = type
    taskVisible.value = true
    currentRow.value = row
    taskForm.value.title = ''
    taskForm.value.taskCategory = 1
    childrenTasksActiveName.value = 0
    taskForm.value.taskSort = null
    taskForm.value.childrenTasks = []
    taskForm.value.formulaMainList = []
    taskForm.value.methodNames = []
    taskForm.value.instruments = []
    if (type == 'add') {
        taskTitle.value = '新增'
        taskForm.value.childrenTasks.push(
            {
                title: '',
                isNess: 1, // 是否必须
                isCalcu: 0, // 是否必须
                childrenTasks: [{
                    title: '',
                    description: '', // 任务描述
                    considerations: '', // 注意事项
                    considerationsFileId: '',
                    considerationsFileIdList: [],
                }]
            }
        )
        taskForm.value.methodNames = [
            { valueName: '' }
        ]
        taskForm.value.instruments = [
            { valueName: '' }
        ]
        taskForm.value.formulaMainList.push(
            {
                formulaName: '',
                description: '',
                expression: '',
                processValuePos: [{
                    valueName: '',
                    meaning: '',
                    unit: '',
                    isBackup: 0,
                    isCalculate: 1,
                    backupDays: '',
                }],
                medianPos: [],
                calculationFormulaContent: []
            }
        )
    } else if (type == 'detail') {
        taskTitle.value = '详情'
        const res = await taskHttp.queryTaskDetailById({ id: row.id })
        res.data.data.instruments = res.data.data.instruments ? JSON.parse(res.data.data.instruments) : [{ valueName: '' }]
        res.data.data.methodNames = res.data.data.methodNames ? JSON.parse(res.data.data.methodNames) : [{ valueName: '' }]
        let taskData = res.data.data
        renameChildren(taskData)
        taskData.formulaMainList.forEach(item => {
            item.calculationFormulaContent = JSON.parse(item.calculationFormulaContent)
            if (item.medianPos.length == 0) {
                item.medianPos = []
            } else {
                item.medianPos.forEach(m => {
                    if (m.medianCalculationFormulaContent) {
                        m.medianCalculationFormulaContent = JSON.parse(m.medianCalculationFormulaContent)
                    } else {
                        m.medianCalculationFormulaContent = []
                    }
                })
            }
        })
        taskData.childrenTasks.forEach(item => {
            item.childrenTasks.forEach(m => {
                console.log(m, 'm---------------')
                m.considerationsFileIdList = []
                if (m.considerationsFileId) {
                    nextTick(() => {
                        m.considerationsFileIdList[0] = getFileInfoById(m.considerationsFileId)
                    })
                }
            })
        })
        console.log(taskData, 'taskData-----------------')
        taskForm.value = { ...taskData }
    } else if (type == 'edit') {
        taskTitle.value = '编辑'
        const res = await taskHttp.queryTaskDetailById({ id: row.id })
        res.data.data.instruments = res.data.data.instruments ? JSON.parse(res.data.data.instruments) : [{ valueName: '' }]
        res.data.data.methodNames = res.data.data.methodNames ? JSON.parse(res.data.data.methodNames) : [{ valueName: '' }]
        let taskData = res.data.data
        renameChildren(taskData)
        taskData.formulaMainList.forEach(item => {
            console.log(item, 'item.formulaMainList')
            if (item.calculationFormulaContent) {
                item.calculationFormulaContent = JSON.parse(item.calculationFormulaContent)
            } else {
                item.calculationFormulaContent = []
            }
            if (item.medianPos.length == 0) {
                item.medianPos = []
            } else {
                item.medianPos.forEach(m => {
                    if (m.medianCalculationFormulaContent) {
                        m.medianCalculationFormulaContent = JSON.parse(m.medianCalculationFormulaContent)
                    } else {
                        m.medianCalculationFormulaContent = []
                    }
                })
            }
        })
        console.log(taskData.formulaMainList, 'formulaMainList')

        taskData.childrenTasks.forEach(item => {
            item.childrenTasks.forEach(m => {
                console.log(m, 'm---------------')
                m.considerationsFileIdList = []
                if (m.considerationsFileId) {
                    nextTick(async () => {
                        m.considerationsFileIdList[0] = await getFileInfoById(m.considerationsFileId)
                    })
                }
            })
        })
        console.log(taskData, 'taskData--------333333---------')
        taskForm.value = { ...taskData }
    }
}
const clearPic = (row) => {
    row.considerationsFileId = ''
    row.considerationsFileIdList = []
}
// 递归字段名转换函数

function renameChildren (tree) {
    if (tree.hasOwnProperty('childrens')) {
        tree.childrenTasks = tree.childrens;
        delete tree.childrens;
    }
    if (tree.childrenTasks && Array.isArray(tree.childrenTasks)) {
        for (const child of tree.childrenTasks) {
            renameChildren(child);
        }
    }
}
// 删除
const handleDelete = async (row) => {
    ElMessageBox.confirm(
        `是否删除该任务【任务名称：${row.title}】？`,
        "删除",
        {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
        }
    )
        .then(async () => {
            const res = await taskHttp.delTask({ id: row.id })
            if (res.data.code == 200) {
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
            }
        })
}
//步骤active
const childrenTasksActiveName = ref(0)
//计算公式active
const formulaMainListActiveName = ref(0)
const taskForm = ref({
    title: '',
    taskCategory: 1,
    taskSort: null,
    childrenTasks: [{
        title: '',
        isNess: 1, // 是否必须
        childrenTasks: [{
            title: '',
            description: '', // 任务描述
            considerations: '', // 注意事项
        }]
    }], // 步骤
    isNess: '', // 是否必须
    description: '', // 任务描述
    considerations: '', // 注意事项
    isCalculation: 'fasle',
    formulaMainList: [{
        formulaName: '',
        description: '',
        expression: '',
        processValuePos: [{
            valueName: '',
            meaning: '',
            unit: '',
            isBackup: 0,
            isCalculate: 1,
            backupDays: '',
        }],
        medianPos: [],
        calculationFormulaContent: []
    }], // 计算公式
})
// 公式的自定义数据
const processValuePosList = ref([])
// 公式值
const formulaStyleList = ref([])

// 增加步骤
const addSteps = () => {
    taskForm.value.childrenTasks.push({
        title: '',
        isNess: '1', // 是否必须
        childrenTasks: [{
            title: '',
            description: '', // 任务描述
            considerations: '', // 注意事项
        }]
    })
    childrenTasksActiveName.value = taskForm.value.childrenTasks.length - 1
}
// 删除步骤
const deleteSteps = () => {
    taskForm.value.childrenTasks.splice(childrenTasksActiveName.value, 1)
    if (childrenTasksActiveName.value > 0) {
        childrenTasksActiveName.value = childrenTasksActiveName.value - 1
    } else {
        childrenTasksActiveName.value = 0
    }
}
// 
const uploadPic = () => { }
// 增加步骤分解
const addStepsDecomposition = () => {
    taskForm.value.childrenTasks[childrenTasksActiveName.value].childrenTasks.push({
        title: '',
        description: '', // 任务描述
        considerations: '', // 注意事项
    })
}
// 删除步骤分解
const deleteStepsDecomposition = (item, index) => {
    taskForm.value.childrenTasks[childrenTasksActiveName.value].childrenTasks.splice(index, 1)
}
// 增加公式
const addCalculationFormula = () => {
    taskForm.value.formulaMainList.push({
        formulaName: '',
        description: '',
        expression: '',
        processValuePos: [{
            valueName: '',
            meaning: '',
            unit: '',
            isBackup: 0,
            isCalculate: 1,
            backupDays: '',
        }],
        medianPos: [],
        calculationFormulaContent: []
    })
    formulaMainListActiveName.value = taskForm.value.formulaMainList.length - 1
}
// 删除公式
const deleteCalculationFormula = () => {
    if (taskType == 'add') {
        taskForm.value.formulaMainList.splice(formulaMainListActiveName.value, 1)
        if (formulaMainListActiveName.value > 0) {
            formulaMainListActiveName.value = formulaMainListActiveName.value - 1
        } else {
            formulaMainListActiveName.value = 0
        }
    } else {
        ElMessageBox.confirm(
            `是否删除该公式【公式名称：${taskForm.value.formulaMainList[formulaMainListActiveName.value].formulaName}】？`,
            "删除",
            {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning",
            }
        ).then(async () => {
            let params = {
                id: taskForm.value.formulaMainList[formulaMainListActiveName.value].id,
                taskId: taskForm.value.formulaMainList[formulaMainListActiveName.value].id
            }
            const res = await taskHttp.delFormulaMain(params)
            if (res.data.code == 200) {
                taskForm.value.formulaMainList.splice(formulaMainListActiveName.value, 1)
                if (formulaMainListActiveName.value > 0) {
                    formulaMainListActiveName.value = formulaMainListActiveName.value - 1
                } else {
                    formulaMainListActiveName.value = 0
                }
            }
        })
    }
}
// 增加仪器
const addInstruments = () => {
    taskForm.value.instruments.push({
        valueName: '',
    })
}
// 删除仪器
const deleteInstruments = (item, index) => {
    taskForm.value.instruments.splice(index, 1)
}
// 增加仪器
const addMethodNames = () => {
    taskForm.value.methodNames.push({
        valueName: '',
    })
}
// 删除仪器
const deleteMethodNames = (item, index) => {
    taskForm.value.methodNames.splice(index, 1)
}
// 增加过程值
const addProcessValue = () => {
    taskForm.value.formulaMainList[formulaMainListActiveName.value].processValuePos.push({
        valueName: '',
        meaning: '',
        unit: '',
        isBackup: 0,
        isCalculate: 1,
        backupDays: '',
    })
}
// 删除过程值
const deleteProcessValue = (item, index) => {
    taskForm.value.formulaMainList[formulaMainListActiveName.value].processValuePos.splice(index, 1)
}
// 增加公式过程值
const addFormulaProcessValue = (index, type, idx) => {
    if (type == 'median') {
        taskForm.value.formulaMainList[index].medianPos[idx].medianCalculationFormulaContent.push({
            type: '1',
            value: '',
        })
    } else {
        taskForm.value.formulaMainList[index].calculationFormulaContent.push({
            type: '1',
            value: '',
        })
    }
}
// 增加公式数值
const addFormulaNumber = (index, type, idx) => {
    if (type == 'median') {
        taskForm.value.formulaMainList[index].medianPos[idx].medianCalculationFormulaContent.push({
            type: '2',
            value: '',
        })
    } else {
        taskForm.value.formulaMainList[index].calculationFormulaContent.push({
            type: '2',
            value: '',
        })
    }
}
// 增加公式运算符号
const addFormulaOperator = (index, type, idx) => {
    if (type == 'median') {
        taskForm.value.formulaMainList[index].medianPos[idx].medianCalculationFormulaContent.push({
            type: '3',
            value: '',
        })
    } else {
        taskForm.value.formulaMainList[index].calculationFormulaContent.push({
            type: '3',
            value: '',
        })
    }
}
// 清除 
const clearFormula = (index, type, idx) => {
    if (type == 'median') {
        taskForm.value.formulaMainList[index].medianPos[idx].medianCalculationFormulaContent = []
        taskForm.value.formulaMainList[index].medianPos[idx].medianName = ''
        taskForm.value.formulaMainList[index].medianPos[idx].medianMeaning = ''
        taskForm.value.formulaMainList[index].medianPos[idx].digit = ''
        taskForm.value.formulaMainList[index].medianPos[idx].unit = ''
    } else {
        taskForm.value.formulaMainList[index].calculationFormulaContent = []
        formulaStyleList.value = []
    }
}

// 增加过程值
const addMedianPosValue = () => {
    taskForm.value.formulaMainList[formulaMainListActiveName.value].medianPos.push({
        createdTime: null,
        digit: '',
        formulaId: '',
        id: null,
        medianCalculationFormulaContent: [],
        medianExpression: '',
        medianMeaning: '',
        unit: '',
        medianName: '',
        updatedTime: '',
    })
}
// 删除过程值
const deleteMedianPosValue = (item, index) => {
    taskForm.value.formulaMainList[formulaMainListActiveName.value].medianPos.splice(index, 1)
}
// 保存公式
const saveFormula = async (index) => {
    console.log(taskForm.value.formulaMainList[index], 'taskForm.value.formulaMainList[index]')
    let saveFormulaForm = JSON.parse(JSON.stringify(taskForm.value.formulaMainList[index]))
    saveFormulaForm.medianPos.forEach(item => {
        item.medianCalculationFormulaContent = JSON.stringify(item.medianCalculationFormulaContent)
    })
    let params = {
        taskId: taskForm.value.id,
        ...saveFormulaForm,
        calculationFormulaContent: JSON.stringify(taskForm.value.formulaMainList[index].calculationFormulaContent)
    }
    if (taskForm.value.formulaMainList[index].id) {
        // 修改
        const res = await taskHttp.updateFormulaMain(params)
        if (res.data.code == 200) {
            console.log(res.data.data, res.data.code)
            ElMessage({
                type: 'success',
                message: '修改成功'
            })
            handleClick('edit', currentRow.value)
        } else {
            ElMessage({
                type: 'error',
                message: res.data.msg
            })
        }
    } else {
        const res = await taskHttp.addFormulaMain(params)
        if (res.data.code == 200) {
            console.log(res.data.data, res.data.code)
            ElMessage({
                type: 'success',
                message: '新增成功'
            })
            handleClick('edit', currentRow.value)
        } else {
            ElMessage({
                type: 'error',
                message: res.data.msg
            })
        }
    }
}
const delelteCalculationFormulaItem = (index, q, type, idx) => {
    if (type == 'median') {
        taskForm.value.formulaMainList[index].medianPos[idx].medianCalculationFormulaContent.splice(q, 1)
    } else {
        taskForm.value.formulaMainList[index].calculationFormulaContent.splice(q, 1)
    }
}
const confirmLoading = ref(false)
const taskConfirm = async (type) => {
    confirmLoading.value = true
    taskForm.value.formulaMainList.forEach((item, index) => {
        item.expression = formulaStyleList.value[index]
    })
    let params = JSON.parse(JSON.stringify(taskForm.value))
    params.instruments = JSON.stringify(params.instruments)
    params.methodNames = JSON.stringify(params.methodNames)
    params.formulaMainList.forEach((item, index) => {
        item.calculationFormulaContent = JSON.stringify(item.calculationFormulaContent)
        item.medianPos.forEach(m => {
            m.medianCalculationFormulaContent = JSON.stringify(m.medianCalculationFormulaContent)
        })
    })
    if (type == 'add') {
        const res = await taskHttp.addTaskDetail(params)
        if (res.data.code == 200) {
            console.log(res.data.data, res.data.code)
            ElMessage({
                type: 'success',
                message: '新增成功！'
            })
            taskVisible.value = false
        } else {
            ElMessage({
                type: 'error',
                message: res.data.msg
            })
        }
        confirmLoading.value = false
    } else {
        const res = await taskHttp.updateTask(params)
        if (res.data.code == 200) {
            console.log(res.data.data, res.data.code)
            ElMessage({
                type: 'success',
                message: '修改成功！'
            })
            taskVisible.value = false
        } else {
            ElMessage({
                type: 'error',
                message: res.data.msg
            })
        }
        confirmLoading.value = false
    }
    search()
}

// watch
watch(
    () => taskForm.value.formulaMainList,
    (val) => {
        processValuePosList.value = []
        formulaStyleList.value = []
        console.log(val)
        val.forEach(item => {
            let processValueList = []
            item.processValuePos.forEach(m => {
                if (m.isCalculate == 1) {
                    processValueList.push(m.valueName)
                }
            })
            processValuePosList.value.push(processValueList)
            if (taskType.value != 'detail') {
                let formulaStyleitem = []

                console.log(item)
                item.calculationFormulaContent && item.calculationFormulaContent.forEach(m => {
                    formulaStyleitem.push(m.value)
                })
                item.medianPos && item.medianPos.forEach(m => {
                    let medianFormulaStyleitem = []
                    console.log(m.medianCalculationFormulaContent, 'm.medianCalculationFormulaContent')
                    m.medianCalculationFormulaContent && m.medianCalculationFormulaContent.forEach(k => {
                        medianFormulaStyleitem.push(k.value)
                    })
                    m.medianExpression = medianFormulaStyleitem.join(' ')
                })
                item.expression = formulaStyleitem.join(' ')
                formulaStyleList.value.push(formulaStyleitem.join(' '))
            }
        })
    },
    { deep: true }
)
const uploadFileList = async (params, row) => {
    const res = await fileInfoHttp.fileInfoUpload(params)
    if (res.data.code == 200) {
        res.data.data.name = res.data.data.fileName
        row.considerationsFileIdList[0] = res.data.data
        row.considerationsFileId = row.considerationsFileIdList[0].id
    }
}
const handleSuccessStepPic = () => {

}
const handleRemoveStepPic = () => {

}
const handlePictureCardPreview = () => {

}
onMounted(() => {
    search()
})
</script>

<style scoped lang="less">
.dialogContent {
    width: 960px;
    padding-top: 16px;
    .dialogModel {
        .modelTitle {
            font-size: 16px;
            line-height: 18px;
            height: 18px;
            padding-left: 10px;
            border-left: 4px solid #58be3f;
            margin-bottom: 10px;
            font-weight: 500;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            .operateIcon {
                margin-left: 10px;
                img {
                    width: 18px;
                    height: 18px;
                    margin: 0 2px;
                    cursor: pointer;
                }
            }
        }
    }
}
.operateIcon {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.el-col-content {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .el-col-content-input {
        margin-right: 10px;
    }
}
.el-col-content-mr {
    margin-right: 10px;
    cursor: pointer;
}
.calculationFormula {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 12px;
    .calculationFormulaContent {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        .calculationFormulaContentItem {
            position: relative;
            .delelteItem {
                position: absolute;
                right: 1px;
                top: -3px;
                z-index: 1000;
                background: #f56c6c;
                border-radius: 4px;
                padding: 2px 2px 0px;
            }
        }
    }
}

.demo-tabs {
    padding-bottom: 30px;
}
</style>